<template>
  <div class="home">
    <!-- 头部视图 -->
    <TopView></TopView>
    <!-- 中部视图 -->
    <MiddleView ></MiddleView>
    <!-- 底部视图 -->
    <BottomView></BottomView>
    <!-- 地图视图 -->
    <MapView></MapView>
  </div>
</template>

<script>
import TopView from '@/components/TopView.vue'
import MiddleView from '@/components/MiddleView.vue'
import BottomView from '@/components/BottomView.vue'
import MapView from '@/components/MapView.vue'
/* 导入import通过api */
import {getChartData} from '@/api/index.js'
export default {
  components: { TopView, MiddleView, BottomView, MapView },
  data() {
    return {
      reportData:{}
    }
  },
  /* 通过provide依赖注入把拿到的数据通过getReportData方法传递给指定组件 */
  provide() {
    return {
      /* 函数的引用 */
      getReportData:this.getReportData
    }
  },
  async mounted() {
    this.reportData = await getChartData()
    // console.log(this.reportData);
  },
  methods:{
    getReportData() {
      //返回拿到的数据
      return this.reportData
    }
  }
}
</script>